---
title: PasswordInput
description: "`PasswordInput`は、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。"
storybook: components-passwordinput--basic
source: components/password-input
style: components/password-input/password-input.style.ts
---

```tsx preview
<PasswordInput placeholder="Your Password" />
```

## 使い方

:::code-group

```tsx [package]
import { PasswordInput, StrengthMeter } from "@yamada-ui/react"
```

```tsx [alias]
import { PasswordInput, StrengthMeter } from "@/components/ui"
```

```tsx [monorepo]
import { PasswordInput, StrengthMeter } from "@workspaces/ui"
```

:::

```tsx
<PasswordInput />
<StrengthMeter />
```

### バリアントを変更する

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### サイズを変更する

```tsx preview
<VStack>
  <For each={["xs", "sm", "md", "lg"]}>
    {(size) => (
      <PasswordInput key={size} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>
```

### カラースキームを変更する

```tsx preview
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <PasswordInput
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>
```

### デフォルトで値を表示する

デフォルトで値を表示する場合は、`defaultVisible`を`true`に設定します。

```tsx preview
<PasswordInput
  defaultValue="password"
  defaultVisible
  placeholder="Your Password"
/>
```

### 強度メーターを表示する

強度メーターを表示する場合は、`StrengthMeter`を使用します。

```tsx preview functional client
const [value, setValue] = useState("Password")

const getStrength = (password: string): number => {
  let strength = 0

  if (password.length >= 8) strength++
  if (/[A-Z]/.test(password)) strength++
  if (/[0-9]/.test(password)) strength++
  if (/[^A-Za-z0-9]/.test(password)) strength++

  return strength
}

return (
  <VStack>
    <PasswordInput
      placeholder="Your Password"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />

    <StrengthMeter value={getStrength(value)} />
  </VStack>
)
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx preview
<VStack>
  <PasswordInput
    focusBorderColor="green.500"
    placeholder="Custom Border Color"
  />
  <PasswordInput
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom Border Color"
  />
</VStack>
```

### プレースホルダーのカラーを変更する

プレースホルダーのカラーを変更する場合は、`_placeholder`に値を設定します。

```tsx preview
<PasswordInput
  placeholder="Custom Placeholder"
  _placeholder={{ color: "blue.500" }}
/>
```

### 無効にする

無効化にする場合は、`disabled`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        disabled
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        readOnly
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### 無効な入力にする

無効な入力にする場合は、`invalid`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        invalid
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### アイコンをカスタマイズする

アイコンをカスタマイズする場合は、`visibilityIcon`の`on`と`off`に`ReactNode`を設定します。

```tsx preview
<PasswordInput
  placeholder="Your Password"
  visibilityIcon={{ off: <SmileIcon />, on: <FrownIcon /> }}
/>
```

### 制御する

```tsx preview functional client
const [visible, setVisible] = useState(true)

return (
  <VStack>
    <Text>Password visibility: {visible ? "show" : "hide"}</Text>

    <PasswordInput
      placeholder="Your Password"
      visible={visible}
      onVisibleChange={setVisible}
    />
  </VStack>
)
```

## Props

<PropsTable name="password-input" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
